<!doctype html>
<html lang="zh">
<head>
    <title>地理坐标选择工具</title>
    <meta charset="UTF-8"/>
    <meta content="pc,mobile" name="applicable-device"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <!--suppress HtmlWrongAttributeValue -->
    <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate"/>
    <!--suppress HtmlWrongAttributeValue -->
    <meta http-equiv="Pragma" content="no-cache"/>
    <!--suppress HtmlWrongAttributeValue -->
    <meta http-equiv="Expires" content="0"/>
    <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
    <meta name="renderer" content="webkit">
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <meta
            name="description"
            content="地理坐标选择工具，使用腾讯地图 API 实现，支持用户点击地图选择坐标，并显示选中坐标的详细信息。"
    />
    <meta name="keywords" content="地理坐标选择, 腾讯地图, 地图 API, 经纬度选择, 地理编码"/>
    <meta name="author" content="山野羡民（QQ:1032694760）"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html,
        body {
            width: 100%;
            height: 100%;
            font-family: Arial, sans-serif;
            overflow: hidden; /* 防止滚动条出现 */
        }

        .map-box {
            width: 100%;
            height: 100vh; /* 使用视口单位确保占满整个视口高度 */
            display: flex;
            flex-direction: column;
        }

        #map {
            flex: 1; /* 让地图区域填充剩余空间 */
            min-height: 0; /* 防止内容溢出时的布局问题 */
        }

        .selected-coords {
            padding: 15px;
            background-color: #f8f8f8;
        }

        .selected-coords strong {
            padding: 10px;
        }

        .controls {
            margin-top: 15px;
            display: flex;
            align-items: center;
            justify-content: flex-end;
            padding: 10px;
            background-color: #ffffff;
            box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
            z-index: 999; /* 确保控制按钮在地图之上 */
        }

        .controls button {
            margin-right: 10px;
            padding: 8px 15px;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .confirm-btn {
            background-color: #409eff;
            color: white;
        }

        .reset-btn {
            background-color: #e0e0e0;
        }
    </style>
</head>
<body>
<div class="map-box">
    <div id="map"></div>
    <div class="controls" id="controls">
        <button class="confirm-btn" onclick="confirmSelection()">确认选择</button>
        <button class="reset-btn" onclick="resetSelection()">重置</button>
    </div>
</div>

<script>
    let map
    let defaultCenter = null
    let selectedPoint = null
    let selectedInfoWindow

    // 页面加载时初始化地图
    window.onload = function () {
        const searchParams = new URLSearchParams(window.location.search)
        console.log('URLSearchParams=' + searchParams)
        const key = searchParams.get('key')
        const lat = searchParams.get('lat')
        const lng = searchParams.get('lng')
        const script = document.createElement('script')
        script.type = 'text/javascript'
        script.onload = () => {
            console.log('腾讯地图 SDK 加载完成')
            initMap(lat, lng)
        }
        script.onerror = (e) => {
            console.error('腾讯地图 SDK 加载失败', e)
        }
        script.src = 'https://map.qq.com/api/gljs?v=1.exp&key=' + key
        document.body.appendChild(script)
    }

    // 初始化地图
    function initMap(lat, lng) {
        // 设置默认中心点（北京市）
        defaultCenter = new TMap.LatLng(lat || 39.98412, lng || 116.307484)
        console.log('地图初始化，中心点:', defaultCenter)
        // 创建地图实例
        map = new TMap.Map(document.getElementById('map'), {
            center: defaultCenter,
            zoom: 19 // 最大缩放层级为 20，精确到 5 米
        })
        // 添加点击事件监听器
        map.on('click', handleMapClick)
        doSelection({
            lat: defaultCenter.lat,
            lng: defaultCenter.lng
        })
        // 触发窗口大小调整事件，确保尺寸正确
        window.dispatchEvent(new Event('resize'))
    }

    // 处理地图点击事件
    function handleMapClick(evt) {
        doSelection(evt.latLng)
    }

    // 执行选择操作
    function doSelection(clickedPoint) {
        // 更新选中点信息
        selectedPoint = {
            lat: Number(clickedPoint.lat.toFixed(6)),
            lng: Number(clickedPoint.lng.toFixed(6))
        }
        // 关闭之前的信息窗口
        if (selectedInfoWindow) {
            selectedInfoWindow.close()
        }
        // 创建信息窗口
        selectedInfoWindow = new TMap.InfoWindow({
            content: `
                <div class="selected-coords">
                  <p><strong>选中的坐标</strong></p>
                  <p id="coordsDisplay">纬度: ${selectedPoint.lat.toFixed(6)}, 经度: ${selectedPoint.lng.toFixed(6)}</p>
                  <p id="addressDisplay"></p>
                </div>
                `,
            position: new TMap.LatLng(selectedPoint.lat, selectedPoint.lng),
            map: map
        })
        // 自动打开信息窗口
        setTimeout(() => {
            selectedInfoWindow.open()
        }, 100)
    }

    // 确认选择
    function confirmSelection() {
        if (selectedPoint) {
            // 这里可以执行你需要的操作，比如将坐标传递给父组件或保存到表单
            console.log('用户确认的坐标:', selectedPoint)
            if (window.parent) {
                // 通过 iframe 加载本页面，发送消息到父窗口
                window.parent.postMessage(
                    {
                        module: 'locationPicker',
                        latlng: selectedPoint
                    },
                    '*'
                )
            } else {
                alert('用户确认的坐标: ' + JSON.stringify(selectedPoint))
            }
        }
    }

    // 重置选择
    function resetSelection() {
        doSelection(defaultCenter)
        map.setCenter(defaultCenter)
    }
</script>
</body>
</html>
